<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<nav class="navbar navbar-expand-lg main-navbar" id="top">
    <form class="form-inline mr-auto">
        <ul class="navbar-nav mr-3">
            <li>
                <a  href="#" data-toggle="sidebar" class="nav-link nav-link-lg">
                    <i class="ion ion-navicon-round"></i>
                </a>
            </li>
        </ul>
    </form>
    <ul class="navbar-nav navbar-right">
        <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg">
              <i class="ion ion-android-person d-lg-none"></i>
              <div class="d-sm-none d-lg-inline-block">你好，[[${session.loginUser.userName}]]</div>
            </a>
            <div class="dropdown-menu dropdown-menu-right">
                <a href="logout" th:href="@{/help}" class="dropdown-item has-icon">
                    <i class="ion ion-help-buoy"></i> 使用帮助
                </a>
                <a href="logout" th:href="@{/logout}" class="dropdown-item has-icon">
                    <i class="ion ion-log-out"></i> 退出登录
                </a>
            </div>
        </li>
    </ul>
</nav>
<div class="main-sidebar" id="sidebar">
    <aside id="sidebar-wrapper">
        <div class="sidebar-brand">
            <a href="index">莫提网盘</a>
        </div>
        <div class="sidebar-user">
            <div class="sidebar-user-picture">
                <a><img style="width: 50px;height: 50px" alt="image" th:src="${session.loginUser.imagePath}" src="u-admin/dist/img/avatar/avatar-1.jpeg"></a>
            </div>
            <div class="sidebar-user-details">
                <div class="user-name" th:text="${session.loginUser.userName}">莫提</div>
                <div class="user-role">
                    <p th:if="${session.loginUser.role == 1}">普通用户</p>
                    <p th:if="${session.loginUser.role == 0}">管理员</p>
                </div>
            </div>
        </div>
        <ul class="sidebar-menu">
            <li class="menu-header">预览</li>
            <li th:class="${currUri == 'index'?'active':''}">
                <a href="index"><i class="ion ion-speedometer"></i><span>使用情况</span></a>
            </li>
            <li class="menu-header">所有文件</li>
            <li th:class="${currUri == 'all'?'active':''}">
                <a href="files"><i class="ion ion-folder"></i> 全部文件</a>
            </li>
            <li th:class="${currUri == 'upload'?'active':''}">
                <a href="upload"><i class="ion ion-upload"></i> 上传文件</a>
            </li>

            <li th:class="${currUri == 'doc' or currUri == 'image' or currUri == 'video' or currUri == 'music' or currUri == 'other'?'active':''}">
                <a href="#" class="has-dropdown"><i class="ion ion-cube"></i><span>分类文件</span></a>
                <ul class="menu-dropdown">
                    <li th:class="${currUri == 'doc'?'active':''}">
                        <a href="doc-files"><i class="ion ion-document-text"></i> 我的文档
                            <div th:text="${statistics.doc}" class="badge badge-primary">10</div>
                        </a>
                    </li>
                    <li th:class="${currUri == 'image'?'active':''}">
                        <a href="image-files"><i class="ion ion-image"></i> 我的图像
                            <div th:text="${statistics.image}" class="badge badge-primary">10</div>
                        </a>
                    </li>
                    <li th:class="${currUri == 'video'?'active':''}">
                        <a href="video-files"><i class="ion ion-ios-videocam"></i> 我的视频
                            <div th:text="${statistics.video}" class="badge badge-primary">10</div>
                        </a>
                    </li>
                    <li th:class="${currUri == 'music'?'active':''}">
                        <a href="music-files"><i class="ion ion-ios-musical-notes"></i> 我的音频
                            <div th:text="${statistics.music}" class="badge badge-primary">10</div>
                        </a>
                    </li>
                    <li th:class="${currUri == 'other'?'active':''}">
                        <a href="other-files"><i class="ion ion-help-circled"></i> 其他文件
                            <div th:text="${statistics.other}" class="badge badge-primary">10</div>
                        </a>
                    </li>
                </ul>
            </li>
            <li th:if="${session.loginUser.role == 0}" th:class="${currUri == 'manage-users' or currUri == 'manage-files' or currUri == 'manage-temp-files' ?'active':''}">
                <a href="#" class="has-dropdown"><i class="ion ion-android-settings"></i><span>管理员</span></a>
                <ul class="menu-dropdown">
                    <li th:class="${currUri == 'manage-users'?'active':''}">
                        <a href="manages-users"><i class="ion ion-person-stalker"></i> 管理用户
                        </a>
                    </li>
                </ul>
            </li>
            <div class="p-3 mt-4 mb-4">
                <a  th:href="@{/logout}" href="#" class="btn btn-danger btn-shadow btn-round has-icon has-icon-nofloat btn-block">
                    <i class="ion ion-log-out"></i>
                    <div>退出登录</div>
                </a>
            </div>
        </ul>
    </aside>
</div>
<footer class="main-footer" id="footer">
    <div class="footer-left">
        Copyright &copy; 2020 <div class="bullet"></div> 版权所有 莫提网盘 <div class="bullet"></div> 备案号: <a href="http://www.beian.miit.gov.cn/">冀ICP备19025674号-2</a>
    </div>
    <div class="footer-right"></div>
</footer>
</body>
</html>